<template>
	<view class="container">
		
		<view class="main-component">
			<view v-for="(item,index) in dragList" :key="index">
				<base-component :record="item"></base-component>
			</view>
		</view>
		<view class="coupon-top">
			<uni-segmented-control class="segmented-control" id="boxFixed" :class="{'is_fixed' : isFixed}" :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#E96D71">
			</uni-segmented-control>
			<view class="content">
				<view v-show="current === 0" @touchstart.self="touchstart" @touchend="touchend">
					<uni-card class="bind-card">
					    <uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx;">
					        <uni-col>
					            <uni-col :span="19">
					    			<uni-tag text="皇冠店铺" size="small" icon="iconshouyehome" type="error" style="margin-right: 0.2rem;"></uni-tag>
					                <text>新生活化妆品和平店</text>
					            </uni-col>
					    		<uni-col :span="5" style="padding-left: 0; text-align: right;">
					    		    <text style="font-size:.8rem; line-height: 24px; color: #5a5959;">1.4公里</text>
					    		</uni-col>
					    		<uni-col :span="10">
					    		    <text style="font-size:.8rem;color: #5a5959;">服务次数4223</text>
					    		</uni-col>
					    		<uni-col :span="14" style="text-align: right;">
					    		    <text style="font-size:.8rem; line-height: 24px; color: #5a5959;">营业时间：9:00-18:00</text>
					    		</uni-col>
					    		<uni-col :span="24">
					    			<text class="iconfont iconlingdang dist-text">服务简称</text>
					    			<text class="iconfont iconlingdang dist-text">服务简称</text>
									<text class="iconfont iconlingdang dist-text">服务简称</text>
									<text class="iconfont iconlingdang dist-text">服务简称</text>
					    		</uni-col>
					    		<uni-col :span="24">
					    			<text style="font-size:.8rem; line-height: 24px; color: #5a5959;">店铺详细信息介绍！ 店铺详细信息介绍！ 店铺详细信息介绍！ 店铺详细信息介绍！ 店铺详细信息介绍！ </text>
					    		</uni-col>
								<uni-col>
									<view>
										<scroll-view class="scroll-view_H" scroll-x="true" @scroll.stop="scrollTo" scroll-left="120">
											<view id="demo1" class="scroll-view-item_H">
												<image src="https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210712/c38e8c86-f815-4048-a925-1e901d46acbb/%E9%A6%96%E9%A1%B5%E6%B4%BB%E5%8A%A8banner.jpg" mode="aspectFill"></image>
											</view>
											<view id="demo2" class="scroll-view-item_H">
												<image src="https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210712/c38e8c86-f815-4048-a925-1e901d46acbb/%E9%A6%96%E9%A1%B5%E6%B4%BB%E5%8A%A8banner.jpg" mode="aspectFill"></image>
											</view>
											<view id="demo3" class="scroll-view-item_H">
												<image src="https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210712/c38e8c86-f815-4048-a925-1e901d46acbb/%E9%A6%96%E9%A1%B5%E6%B4%BB%E5%8A%A8banner.jpg" mode="aspectFill"></image>
											</view>
										</scroll-view>
									</view>
								</uni-col>
					        </uni-col>
					    </uni-row>
					</uni-card>
					<uni-card class="bind-card">
						<uni-row class="demo-uni-row location">
							<view @click="getLocation">
								<uni-row>
									<text style="font-size:.8rem; line-height: 1.5; color: #5a5959;">和平区令闻街200号新生活化妆品公司</text>
								</uni-row>
								<uni-row>
									<text style="font-size:.8rem; line-height: 1.5; color: #5a5959;">1.4公里</text>
								</uni-row>
							</view>
						</uni-row>
					</uni-card>
					
					<uni-card title="营业执照信息" class="bind-card">
						<image src="https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210712/c38e8c86-f815-4048-a925-1e901d46acbb/%E9%A6%96%E9%A1%B5%E6%B4%BB%E5%8A%A8banner.jpg" mode="aspectFill"></image>
					</uni-card>
				</view>
				<view v-show="current === 1" @touchstart="touchstart" @touchend="touchend">
					<uni-card title="店铺管家" class="bind-card">
						<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom: 20rpx; border-bottom: solid 1px #878787;" v-for="item in 4">
							<uni-col :span="4" style="padding-top: 16.66667%; position: relative;">
								<view @click="toHousekeeper">
									<image style="position: absolute; top: 0; left:0; width: 100%; height: 100%;" src="https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210712/c38e8c86-f815-4048-a925-1e901d46acbb/%E9%A6%96%E9%A1%B5%E6%B4%BB%E5%8A%A8banner.jpg" mode="aspectFill"></image>
								</view>
							</uni-col>
							<uni-col :span="20">
								<view @click="toHousekeeper">
									<uni-col :span="12">
										<text style="margin: 0.3rem 0 0 0.3rem">王勇</text>
										<uni-rate :value="3" :size="16" color="#bbb" active-color="#fd911e" max="3" style="display:inline-block;" />
									</uni-col>
									<uni-col :span="12" style="text-align: right;">
										<text style="font-size:.8rem; color: #5a5959;">服务次数4223</text>
									</uni-col>
								
									<uni-col>
										<text class="iconfont iconlingdang dist-text">服务简称</text>
										<text class="iconfont iconlingdang dist-text">服务简称</text>
										<text class="iconfont iconlingdang dist-text">服务简称</text>
										<text class="iconfont iconlingdang dist-text">服务简称</text>
									</uni-col>
								</view>
								
								<uni-col style="margin-top: 16rpx;" v-for="item in 3">
									<view @click="toServiceInfo">
										<uni-col :span="4" style="padding-top: 16.66667%; position: relative;">
											<image style="position: absolute; top: 0; left:0; width: 100%; height: 100%;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132" mode="aspectFill"></image>
										</uni-col>
										<uni-col :span="15">
											<uni-col style="margin: 5rpx 0;">
												<text style="font-size:.8rem; color: #5a5959;" class="clamp">雪非雪青果维雪青果维雪青果维雪青果维雪青果维雪青果维蔬嫩肤护理服务</text>
											</uni-col>
											<uni-col style="margin: 5rpx 0;">
												<text style="font-size:.8rem; color: #5a5959;">护理时长：50分钟</text>
											</uni-col>
										</uni-col>
										<uni-col :span="5">
											<text style="font-size:1.2rem; color: #E37078; line-height: 96rpx;">￥107</text>
										</uni-col>
									</view>
								</uni-col>
							</uni-col>
						</uni-row>
					</uni-card>
				</view>
				<view v-show="current === 2" @touchstart="touchstart" @touchend="touchend">
					<uni-card title="评价信息" class="bind-card">
					    <uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom: 20rpx;" v-for="(item, index) in 3">
					        <uni-col :span="4" style="padding-top: 16.66667%; position: relative;">
					            <view>
					            	<image style="position: absolute; top: 0; left:0; width: 100%; height: 100%; border-radius: 100%;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132" mode="aspectFill"></image>
					            </view>
					        </uni-col>
					        <uni-col :span="20">
					        	<uni-col :span="18">
					        		<text style="margin: 0.3rem 0.5rem 0 0.3rem">王勇</text>
					        		<uni-tag v-if="index == 0" text="置顶" size="small" icon="iconshouyehome" type="warning" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
					        		<uni-tag v-if="index == 0" text="加精" size="small" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
					        	</uni-col>
					        	<uni-col :span="6" style="text-align: right;">
					        		<text style="font-size:.8rem; color: #5a5959;">2021.01.01</text>
					        	</uni-col>
								<uni-col>
									<uni-rate :value="3" :size="16" color="#bbb" active-color="#fd911e" max="3" style="display:inline-block;" />
									<text style="margin-left: 20rpx; font-size:.8rem; color: #FFB800; vertical-align: middle;">4.2星</text>
								</uni-col>
					        </uni-col>
							<uni-col>
							    <uni-tag text="皇冠店铺" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
							    <uni-tag text="皇冠" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
							    <uni-tag text="皇冠" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
							    <uni-tag text="服务" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
							</uni-col>
							<uni-col>
							    <text style="font-size:.8rem; color: #595959;">详细评价内容！！！详细评价内容！！！详细评价内容！！！详细评价内容！！！详细评价内容！！！</text>
							</uni-col>
					    </uni-row>
					</uni-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseComponent from '@/components/baseComponent/baseComponent'
	export default {
		data() {
			return {
				dragList: [
					{
					  "options": {
					    "fileList": [
					      {
					        "url": "https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210421/f54723dd-81c7-41fb-93f0-6574daceb220/a.png"
					      }
					    ],
					    "hotZoneList": []
					  },
					  "label": "热区",
					  "type": "hotZone",
					  "key": "hotZone_1618989025361"
					}
				],
				items: [
					'店铺信息',
					'店铺管家',
					'评价信息'
				],
				current: 0,
				isSearch: false,
				isFixed: false,
				scrollTop: 0,
				touches: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		components: {
			baseComponent,
		},
		mounted() {
			window.addEventListener('scroll',this.handleScroll)
		},
		methods: {
			onClickItem(itme) {
				this.current = itme.currentIndex
			},
			handleScroll(){
			    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
				if (!document.querySelector('#boxFixed')) {
					return;
				}
			    let offsetTop = document.querySelector('#boxFixed').offsetTop;  // 要滚动到顶部吸附的元素的偏移量
			    this.isFixed = scrollTop > offsetTop ? true : false;  // 如果滚动到顶部了，this.isFixed就为true
			},
			scrollTo: function(e) {
				this.old.scrollTop = e.detail.scrollTop
				// console.log(.store, '///////////////////////////////////////////')
				// this.$store.state.showLoading = false;
			},
			getLocation() {
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        // const latitude = res.latitude;
				        // const longitude = res.longitude;
						const latitude = 39.909; // 默认定在首都;
						const longitude = 116.39742;
				        uni.openLocation({
				            latitude: latitude,
				            longitude: longitude,
				            success: function () {
				                console.log('success');
				            }
				        });
				    }
				});
			},
			toHousekeeper() {
				uni.navigateTo({
					url:'/packageG/pages/housekeeper/housekeeper'
				})
			},
			toServiceInfo(){
				uni.navigateTo({
					url:'/packageG/pages/serviceInfo/serviceInfo'
				})
			},
			touchstart(e) {
				console.log(e)
				this.touches = e.changedTouches[0]
			},
			touchend(e){
				const endTouches = e.changedTouches[0]
				const pagex = endTouches.pageX - this.touches.pageX
				const pagey = endTouches.pageY - this.touches.pageY
				if (Math.abs(pagex) > Math.abs(pagey) && Math.abs(pagex) > 120) {
					if (pagex > 0) {
						this.current > 0 ? this.current-- : this.current = 0
					} else if (pagex < 0) {
						this.current < 2 ? this.current++ : this.current = 2
					}
				}
			}
		}
	}

</script>

<style>
	scroll-view {
		height: 200rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 320rpx;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H:nth-child(n+2) {
		margin-left: 20rpx;
	}
	.segmented-control{
		background: #fff;
		height: 90rpx;
		margin-top: 24rpx;
	}
	.bind-card{
		margin: 24rpx 0 0 0;
	}
	.location{
		display: block;
		position: relative;
		padding: 0 2rem 0 1rem;
	}
	.location::before{
		content: ' ';
		display: block;
		width: .5rem;
		height: .5rem;
		border-radius: 100%;
		background: #E94732;
		position: absolute;
		top: 50%;
		margin-top: -.25rem;
		left: 0;
	}
	.location::after{
		content: '\e672';
		display: block;
		position: absolute;
		right: 0;
		font-size: 1.5rem;
		font-family: "iconfont" !important;
		top:50%;
		margin-top: -.75rem;
		color: #E94732;
	}
	image{
		width: 100%;
	}
	.clamp {
		/* #ifdef APP-PLUS-NVUE */
		lines: 1;
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		/* #endif */
	}
</style>

<style scoped >
	.uni-swiper-tab{
        border-bottom: 1upx solid #EEEEEE;
    }
    .swiper-tab-list{
        color: #969696;
        font-weight: bold;
    }
    .uni-tab-bar .active{
        color: #343434;
    }
    .active .swiper-tab-line{
        border-bottom: 6upx solid #FEDE33;
        width: 70upx;
        margin: auto;
        border-top: 6upx solid #FEDE33;
        border-radius: 20upx;
    }
	.dist-text{
		font-size: 24rpx;
		color: #F4B406;
		margin-right: 16rpx;
	}
</style>
